<template>
  <div id="app">
    <div id="nav">
      <div style="background-color: #212121">
        <el-row :gutter="10">
          <el-col :span="5"><div class="grid-content">

          </div></el-col>
          <el-col :span="14">
            <div class="grid-content">
              <div>
                <div class="grid-content"><h2  style="color: aliceblue;font-size: 30px">2019-nCoV BigData Real Time Analysis</h2></div>
              </div>
              <br>
              <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="" prop="name">
                  <el-col :span="21"><div class="grid-content "><el-input v-model="ruleForm.name" placeholder="请输入内容" circle></el-input></div></el-col>
                </el-form-item>
                <el-form-item>
                  <el-col :span="21"><el-button @click="submitForm" type="danger" icon="el-icon-search" circle></el-button></el-col>
                </el-form-item>
                <el-form-item>
                  <el-col :span="21">
                    <el-button type="primary" ><router-link to="/ChinaCharts" style="color: aliceblue;" class="router-style">地图展示</router-link></el-button>
                    <el-button  type="primary"><router-link to="/TableData" style="color: aliceblue;" class="router-style">表格展示</router-link></el-button>
                    <el-button type="primary"><router-link to="/News" class="router-style" style="color: aliceblue;">疫情速报</router-link></el-button>
                    <el-button type="primary"><router-link to="/Blessing" class="router-style" style="color: aliceblue;">送上祝福</router-link></el-button>
                  </el-col>

                </el-form-item>
                <el-form-item>
                  <el-col :span="21"><el-tag type="danger">Copyright © 2020 刘牌</el-tag></el-col>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="5"><div class="grid-content"></div></el-col>
        </el-row>
      </div>
    </div>
    <router-view/>
  </div>
</template>
<script>
  import '../node_modules/echarts/map/js/china.js';
  export default {
    props: ["userJson"],
    data(){

      return{
        ruleForm:{
          name:'',
        },
        dataViews:[],
        confirm:[],
        queryDataView:false,
      }
    },


    methods:{
      submitForm:function () {
        if (this.ruleForm.name === ''){
          this.$message("请输入地区")
        }else {
          this.$router.push({
            name:'Query',
            params:{
              province:this.ruleForm.name,
            }
          })
        }
      }

    },
  }
</script>
<style>
  .centerItem {
    width: 856px;
    height: 640px;
    background-color: #003077;
    margin: 110px auto 0 auto;
  }

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

.el-row {
  margin-bottom: 20px;
&:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
  .router-style{
    text-decoration: none;
    color: white;
  }

</style>
